	class MF {
	    //构造方法中参数设计的思想:
	    //凡是类中需要使用的HTML元素，全都设计为参数
	    constructor(smallBox, mask, bigBox) {
	        this.oSmallBox = smallBox;
	        this.oMask = mask;
	        this.oBigBox = bigBox;
	        this.eventBind();
	    }

	    onmouseover() {
	        let that = this;
	        this.oSmallBox.onmouseover = function() {
	            that.oMask.style.display = "block";
	            that.oBigBox.style.display = "block";
	        }
	    }

	    onmouseout() {
	        let that = this;
	        this.oSmallBox.onmouseout = function() {
	            that.oMask.style.display = "none";
	            that.oBigBox.style.display = "none";
	        }
	    }

	    onmosemove() {
	        let that = this;
	        this.oSmallBox.onmousemove = function(evt) {
	            let e = evt || even;

	            let left = e.pageX - this.offsetLeft - that.oMask.offsetWidth / 2;
	            let top = e.pageY - this.offsetTop - that.oMask.offsetHeight / 2;

	            let x = that.oBigBox.offsetWidth * left / that.oMask.offsetWidth;
	            let y = that.oBigBox.offsetHeight * top / that.oMask.offsetHeight;

	            if (left < 0) {
	                left = 0;
	            }

	            if (top < 0) {
	                top = 0;
	            }

	            let maxLeft = this.offsetWidth - that.oMask.offsetWidth;

	            if (left > maxLeft) {
	                left = maxLeft;
	            }

	            let maxTop = this.offsetHeight - that.oMask.offsetHeight;

	            if (top > maxTop) {
	                top = maxTop;
	            }

	            that.oMask.style.left = left + "px";
	            that.oMask.style.top = top + "px";

	            that.oBigBox.style.backgroundPositionX = -x + "px";
	            that.oBigBox.style.backgroundPositionY = -y + "px";

	            // 小图片    小窗口
	            // ------ = -------
	            // 大图片    大窗口
	        }
	    }

	    eventBind() {
	        this.onmouseover();
	        this.onmouseout();
	        this.onmosemove();
	    }
	}